<template>
<div>
  <t-avatar
      class="avatar-example"
      image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
      shape="circle"
      size="100px"
  ></t-avatar>
  <h2>密码找回</h2>
  <div>
    <div>
      <t-input label="手机" v-model="user.phone" placeholder="请输入手机号">
        <template #suffix>
          <div class="suffix">
            <div class="suffix--line"></div>
            <label style="color: #747bff" @click="sendCode">发送验证码</label>
          </div>
        </template>
      </t-input>
    </div>
    <div>
      <t-input label="验证码" v-model="user.code" type="number" placeholder="请输入验证码"></t-input>
    </div>
    <div>
      <t-input label="密码" v-model="user.password" type="password" placeholder="请输入密码"></t-input>
    </div>
    <div style="margin-top: 20px">
      <t-button size="large" theme="light" @click="find" block>密码找回</t-button>
    </div>
  </div>
  <!--  其他导航-->
  <div style="margin-top: 20px;">
    <div style="float: left">
      <router-link style="color: grey;font-size: 12px;" to="/register">没有账号点击注册</router-link>
    </div>
    <div style="float: right">
      <router-link style="color: grey;font-size: 12px;" to="/">已有账号点击登录</router-link>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from 'vue'
import {Toast} from "tdesign-mobile-vue";
import {useRouter} from "vue-router";

const router=useRouter()

const user=ref({
  phone:"",
  password:"",
  code:""
})

const sendCode=()=>{
  //请求接口 实现找回验证码
  get("user/sendfcode?phone="+user.value.phone).then(r=>{
    if(r.code==0){
      console.log(r.data)
      Toast("验证码发送成功，请查收！")
    }else{
      Toast(r.data)
    }
  })

}
const find=()=>{
  //请求接口 实现密码找回
  post("user/findpass",user.value).then(r=>{
    if(r.code==0){
      //密码找回成功 跳转登录页面
      router.push("/")
    }else{
      Toast(r.data)
    }
  })

}

</script>

<style scoped>

</style>